<template>
  <view class="specialHome">
    <view class="bgImg"></view>
    <view class="special-top">
      <u-icon name="arrow-left" size="42rpx" color="#313131" @click="onPrevious"></u-icon>
      <view class="special-icon">
        <image src="@/static/icon/specialcolumnPage/member.png" mode="" v-show="type ==='1'"></image>
        <image src="@/static/icon/specialcolumnPage/share.png" mode="" v-show="type ==='1'"></image>
        <image src="@/static/icon/specialcolumnPage/more.png" mode="" @click="toDetails"></image>
      </view>
    </view>
    <view class="special-head">
      <view class="head-top">
        <view class="head-img">
          <image src="@/static/icon/userPage/promotion2.png" mode=""></image>
        </view>
        <view class="head-title">
          <view>叮叮老师看球</view>
          <view>专栏号：121313</view>
        </view>
      </view>
      <view class="head-introduction">简介：热爱足球，热爱讨论。</view>
    </view>
    <view class="special-main">
      <view class="special-list" v-for="item,index in 6" :key="index" @click="toCollect()">
        <view class="special-timer">1小时前发布
          <image src="@/static/icon/specialcolumnPage/set.png" mode="" v-show="type === '1'"
            @click.stop="popupShow = true">
          </image>
        </view>
        <view class="special-title">
          <view class="special-Topping">置顶</view>
          亚洲杯竞足5场预测(文章标题)
        </view>
        <view class="special-nav">
          <view class="special-text">
            成功9连红，昨日亚洲杯3中2！今晚继续关注亚洲杯小组赛，
            解析韩国VS巴林的亚洲…(文章正文内容)成功9连红，昨日亚洲杯3中2！今晚继续关注亚洲杯小组赛，
            解析韩国VS巴林的亚洲…(文章正文内容)
          </view>
          <view class="special-img">
            <image src="@/static/icon/specialcolumnPage/red.png" mode=""></image>
            <!-- <image src="@/static/icon/specialcolumnPage/black.png" mode=""></image> -->
            <!-- <image src="@/static/icon/specialcolumnPage/walk.png" mode=""></image> -->
          </view>
        </view>
        <view class="special-footer">
          <view class="special-label sale">销售中</view>
          <!-- <view class="special-label shelf">已下架</view> -->
          <!-- <view class="special-label refund">有退款</view> -->
          <!-- <view class="special-label open">已公开</view> -->
          <view class="special-record" v-show="type === '1'">阅读1222 付费332</view>
          <view class="special-price">
            <image src="@/static/icon/wallet/species.png" mode=""></image>
            188
          </view>
        </view>
      </view>
      <view class="special-release" v-if="type === '1'">
        <image src="@/static/icon/specialcolumnPage/release.png" mode="" @click="onRelease"></image>
      </view>
    </view>
    <ArticlePopup :show='popupShow' @closeShow="onCloseShow" @popupChange="onPopupChange"></ArticlePopup>
  </view>
</template>

<script>
  import ArticlePopup from './components/ArticlePopup/index.vue'
  export default {
    name: 'SpecialHome',
    components: {
      ArticlePopup
    },
    data() {
      return {
        keyword: '',
        type: '',
        popupShow: false
      };
    },
    onLoad(e) {
      if (e && e.type) {
        this.type = e.type
        console.log(this.type);
      }
    },
    methods: {
      onPrevious() {
        uni.navigateBack(-1)
      },
      toDetails() {
        uni.navigateTo({
          url: `/pages/specialColumnPage/userPage/special-details?type=${this.type}`
        })
      },
      toCollect() {
        if (this.type === '0') {
          uni.navigateTo({
            url: `/pages/specialColumnPage/collect-detail?type=${this.type}`
          })
        } else if (this.type === '1') {
          uni.navigateTo({
            url: '/pages/specialColumnPage/expertPage/expert-article'
          })
        }
      },
      onCloseShow(val) {
        this.popupShow = val
      },
      onPopupChange(val) {
        console.log(val, 3333333);
      },
      onRelease(){
       uni.navigateTo({
         url:'/pages/specialColumnPage/expertPage/expert-release'
       }) 
      }
    },
  };
</script>

<style lang="less" scoped>
  .specialHome {
    padding-top: var(--status-bar-height);
    position: relative;

    .special-top {
      display: flex;
      height: 108rpx;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 40rpx;

      // position: sticky;
      // top: 0;
      // left: 0;
      // z-index: 5;
      // background: url(/static/img/collectPage/collect.png) no-repeat;
      .special-icon {
        display: flex;
        align-items: center;

        image {
          height: 52rpx;
          width: 52rpx;
          margin-left: 30rpx;
        }
      }
    }

    .special-head {
      margin-top: 20rpx;
      position: sticky;
      z-index: 1;
      box-sizing: border-box;
      padding: 0 30rpx;

      .head-top {
        display: flex;
        align-items: center;

        .head-img {
          width: 118rpx;
          height: 118rpx;
          border-radius: 10rpx;

          image {
            width: 118rpx;
            height: 118rpx;
            border-radius: 10rpx;
          }
        }

        .head-title {
          margin-left: 30rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #313131;

          :first-child {
            font-size: 36rpx;
          }
        }
      }

      .head-introduction {
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #313131;
      }
    }

    .special-main {
      width: 100%;
      height: 1278rpx;
      background: rgba(248, 248, 248);
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      position: sticky;
      z-index: 1;
      margin-top: 40rpx;
      box-sizing: border-box;
      padding: 10rpx 20rpx;
      overflow-y: scroll;
      position: relative;

      .special-list {
        width: 710rpx;
        // height: 292rpx;
        background: rgba(255, 255, 255);
        box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
        border-radius: 10rpx;
        box-sizing: border-box;
        padding: 20rpx;
        margin-top: 20rpx;

        .special-timer {
          font-size: 28rpx;
          font-weight: 400;
          color: #909090;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            height: 34rpx;
            width: 72rpx;
          }
        }

        .special-title {
          font-size: 28rpx;
          font-weight: 500;
          color: #313131;
          margin-top: 6rpx;
          display: flex;
          align-content: center;

          .special-Topping {
            width: 100rpx;
            height: 42rpx;
            background: rgba(255, 255, 255, 0.39);
            border: 2px solid #909090;
            border-radius: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 42rpx;
            text-align: center;
            color: #909090;
            margin-right: 10rpx;
          }
        }

        .special-nav {
          width: 670rpx;
          height: 108rpx;
          background: rgba(248, 248, 248);
          border-radius: 10rpx;
          box-sizing: border-box;
          padding: 20rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #909090;
          display: flex;
          align-items: center;
          margin-top: 6rpx;
          position: relative;

          .special-text {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .special-img {
            position: absolute;
            right: 80rpx;
            top: -70rpx;

            image {
              height: 84rpx;
              width: 84rpx;
            }
          }
        }

        .special-footer {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding-top: 10rpx;
          justify-content: space-between;

          .special-record {
            flex: 1;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 34rpx;
            color: #909090;
          }

          .special-label {
            width: 134rpx;
            height: 42rpx;
            margin-right: 10rpx;
            border-radius: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 42rpx;
            text-align: center;
          }

          .sale {
            background: rgba(255, 255, 255);
            border: 2px solid #FF5353;
            color: #FF5353;
          }

          .shelf {
            background: #F8F8F8;
            color: #909090;
          }

          .refund {
            background: rgba(255, 255, 255, 0.39);
            border: 2px solid #9850D6;
            color: #9850D6;
          }

          .open {
            background: rgba(255, 255, 255, 0.39);
            border: 2px solid #54B958;
            color: #54B958;
          }


          .special-price {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: 500;
            color: #313131;

            image {
              height: 46rpx;
              width: 46rpx;

            }
          }
        }
      }

      .special-release {
        position: fixed;
        bottom: 60rpx;
        right: 60rpx;

        image {
          height: 126rpx;
          width: 126rpx;
        }
      }
    }
  }

  .bgImg {
    background: url(/static/img/collectPage/collect.png) no-repeat;
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 750rpx;
  }
</style>